<template>
  <div class="row justify-start bg-grey-3" style="width: 100%;height: 100%;">
    <div class="bg-cyan text-white" style="height: 20%;width: 100%;">
      <q-toolbar>
<!--        <q-btn flat round dense icon="assignment_ind" />-->
        <q-toolbar-title>企业</q-toolbar-title>
      </q-toolbar>
      <q-toolbar inset>
        <q-breadcrumbs active-color="white" style="font-size: 16px">
          <q-breadcrumbs-el label="管理界面" icon="home" />
          <q-breadcrumbs-el label="企业" icon="widgets" />
        </q-breadcrumbs>
      </q-toolbar>
    </div>
    <div style="width: 100%;">
      <input-table  :data="data"  :columns="defaultData" :bgcolor="bgColor" @recodeIndex="readIndex" :category="'table'">
<!--        <template v-slot:header-right>-->
<!--          <div>-->
<!--            <q-btn color="cyan" @click="addData">增加数据</q-btn>-->
<!--          </div>-->
<!--        </template>-->
        <template v-slot:operate>
          <div class="q-gutter-md">
            <q-btn color="positive">厂区管理</q-btn>
            <q-btn color="negative" >删除</q-btn>
          </div>
        </template>
        <template v-slot:submit>
          <div>
            <q-btn @click="getdata"  class="q-ma-md" color="primary">提交</q-btn>
          </div>
        </template>
        <template v-slot:header-center>
          <div class="text-h4 text-positive">企业和厂区</div>
        </template>
      </input-table>

    </div>
  </div>
</template>

<script>
/* 企业和厂区组件 */
// eslint-disable-next-line
import { defineComponent, ref, onMounted } from 'vue'
import InputTable from 'components/commonComponent/InputComponent'
// eslint-disable-next-line
import defaultData from 'pages/data-import/enterprise/defaultData'
export default defineComponent({
  name: 'Index',
  components: { InputTable },
  setup (props, context) {
    const bgColor = ref('#00BFFF')
    const readIndex = (index) => {
      console.log(index)
      deleteLine(index)
    }
    const data = ref([]) // 填入的值
    let propertys = [] //  保存属性名数组
    const getProps = function () {
      return defaultData.map(item => {
        return {
          key: item.field,
          tag: item.tag,
          type: item.type ? item.type : '',
          options: item.options,
          align: item.align,
          value: item.tag === 'select' ? [] : ''
        }
      })
    }
    onMounted(() => {
      propertys = getProps()
      console.log('propertys', propertys)
    })
    const addData = function () {
      data.value = [...data.value, JSON.parse(JSON.stringify(propertys))]
      console.log('data', data)
    }
    const deleteLine = (index) => {
      console.log(index)
      data.value.splice(index, 1)
    }
    const getdata = () => {
      console.log(data.value)
    }
    return {
      bgColor,
      data,
      propertys,
      addData,
      defaultData,
      deleteLine,
      getdata,
      readIndex
    }
  }
})
</script>
<style scoped>
</style>
